import { Dropdown, Layout, Space, message } from 'antd';
import style from './index.module.scss';
import { DownOutlined, HomeOutlined, SmileOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import type { MenuProps } from 'antd';
import { useDispatch } from 'react-redux';


const { Header } = Layout;



function MainHeader() {
    const navigateTo = useNavigate()
    const dispath = useDispatch()

    const items: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <a onClick={() => {
                    dispath({ type: "setToken", value: '' })
                    message.success('退出成功')
                    setTimeout(() => {
                        navigateTo('/login')
                    }, 1000)
                }}>退出登录</a>
            ),
            icon: <SmileOutlined />,
        },
    ];

    return (
        <Header className={style.header}>
            <div className={style.header_home}>
                <HomeOutlined onClick={() => navigateTo('/home')} />
            </div>
            <div className={style.header_logo}>后台管理系统</div>
            <div className={style.header_dropdown}>
                <Dropdown menu={{ items }}>
                    <a>
                        {/* onClick={(e) => e.preventDefault()} */}
                        <Space>
                            管理员
                            <DownOutlined />
                        </Space>
                    </a>
                </Dropdown>
            </div>
        </Header>
    )
}

export default MainHeader;